<!--  -->
<template>
  <div class="box">
    <div class="add">
      <span class="searchList">规格搜索:</span>
      <input
        v-model="valueList"
        type="text"
        placeholder="请输入商品规格"
        @input="onChangeList"
        @keydown="onKeyDown"
      >
      <el-button
        type="info"
        size="mini"
        icon="el-icon-search"
        @click="searchValueList"
      />
    </div>
    <div class="addList1">
      <el-button
        type="primary"
        class="el-button1"
        @click="dislog()"
      >
        添加商品规格
      </el-button>
      <el-button class="el-button2">
        批量删除
      </el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="45%"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <h3>属性规格</h3>
        <el-form-item
          label="商品名称"
          prop="name"
        >
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入标题名称"
          />
        </el-form-item>
        <div class="desclist">
          <el-form-item
            label="商品规格"
            prop="role"
          >
            <el-input
              v-model="ruleForm.role"
              placeholder="请输入规格"
            />
          </el-form-item>
          <el-form-item
            label="商品规格值"
            prop="style"
          >
            <el-input
              v-model="ruleForm.style"
              placeholder="请输入规格值"
            />
          </el-form-item>
          <span
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              type="primary"
              @click="compireAdd(ruleForm)"
            >确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </div>
      </el-form>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="searchList.length ? searchList : tableData"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        class=""
        width="40"
      >
        <template slot-scope="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="100"
      />
      <el-table-column
        prop="name"
        label="规格名称"
        width="120"
      />
      <el-table-column
        prop="role"
        label="商品规格"
        show-overflow-tooltip
      />
      <el-table-column
        prop="style"
        label="商品属性"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template
          slot-scope="scope"
          class="opreation"
        >
          <el-button
            class="opretations"
            size="mini"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            class="delList"
            size="mini"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "../../utils/request2";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [],
      multipleSelection: [],
      searchList: [],
      dialogVisible: false,
      typeAddList: "",
      valueList: "",
      ruleForm: {
        name: "",
        role: "",
        desc: "",
        id: Math.round(Math.random() * 100)
      },
      indexList: "",
      rules: {
        name: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
          { min: 1, max: 10, message: "最多10个字符", trigger: "blur" }
        ]
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //判断弹框组件的类型//根据不同类型展示不同的弹框
    dislog() {
      this.dialogVisible = true;
      this.typeAddList = "rowA";
    },
    //行数据获取
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //赋值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //请求接口的数据
    async getList() {
      const res = await request("/api/list");
      this.tableData = res.data;
      //进行排序处理
      this.tableData = this.tableData.sort((a, b) => {
        return b.id - a.id;
      });
    },
    searchValueList() {
      this.searchList = this.tableData.filter(item => {
        console.log(item.role, this.valueList);
        return item.role.includes(this.valueList);
      });
    },
    //点击事件确认事件
    compireAdd(ruleForm) {
      console.log(ruleForm);
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.dialogVisible = false;
          if (this.typeAddList === "rowA") {
            this.tableData.push(this.ruleForm);
          } else if (this.typeAddList === "rowB") {
            this.tableData.forEach(item => {
              if (item.id === this.indexList) {
                item.name = this.ruleForm.name;
                item.role = this.ruleForm.role;
                item.desc = this.ruleForm.desc;
              }
            });
          }
          this.ruleForm = {
            name: "",
            region: "",
            style: "",
            id: Math.round(Math.random() * 100)
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑事件
    handleEdit(row) {
      this.dialogVisible = true;
      this.typeAddList = "rowB";
      this.indexList = row.id;
      this.ruleForm = { ...row };
    },
    //删除事件
    handleDelete(row) {
      this.searchList = [];
      this.tableData = this.tableData.filter(item => {
        return item.id !== row.id;
      });
    },
    selectDataListMap(selection, row) {
      console.log(selection, row);
    },
    searchListLength() {
      this.searchList = this.tableData.filter(item => {
        console.log(item.role, this.valueList);
        return item.role.includes(this.valueList);
      });
    },
    onChangeList() {
      if(this.valueList){
       console.log(1);
      }else{
        this.searchList=[]
      }
    },
    onKeyDown(e) {
      if(e.keyCode ===13){
         this.searchList = this.tableData.filter((item) => {
          console.log(item.role,this.valueList);
            return item.role.includes(this.valueList);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table_1_column_6 {
  div {
    text-align: center;
  }
}
.opretations {
  border: none;
  color: #1890ff;
}
.el-icon-search {
  font-size: 0.875rem;
  color: #ccc;
}
.box {
  width: 98%;
  height: 39.375rem;
  margin: 1.875rem 1.25rem;
  border-radius: 0.5rem;
  background: #fff;
}
.el-table {
  width: 98%;
  height: auto;
  margin: 1.875rem 1rem;
  border: 0.0625rem solid #ccc;
  // border-radius: 0.9375rem;
}
.desclist {
  display: flex;
}
.delList {
  color: #1890ff;
  border: none;
}
.add {
  display: flex;
  align-items: center;
  padding-top: 1.875rem;
  margin-left: 1.25rem;
  span {
    margin-right: 0.3125rem;
  }
  input {
    width: 18.75rem;
    margin-right: 0.3125rem;
  }
}
.app-main[data-v-078753dd] {
  background: #f2f2f2;
}
.addList1 {
  padding-top: 1.875rem;
  margin-left: 1.25rem;
  .el-button1 {
    color: #fff;
  }
  .el-button2 {
    border: 0.0625rem solid #f2f2f2;
    span {
      color: #333;
    }
  }
}

.searchList {
  font-size: 0.875rem;
}
.el-input {
  width: 9.3rem;
}
.dialog-footer {
  margin-left: 2.2265625rem;
}
</style>
